<!--
 * @Description: 布局
 * @Author: 李沛韬(lipeitao1002@163.com)
 * @Date: 2020-12-11 16:28:47
 * @LastEditors: 李沛韬(lipeitao1002@163.com)
 * @LastEditTime: 2020-12-15 10:35:49
-->
<template>
  <div class="home">
    <header>
      <div class="logo-box">
        <div class="logo" :class="{ isHidden: isCollapse }">
          <i class="icon"></i>
          {{title}}
        </div>
        <div class="toggleBtn">
          <el-button size="mini" :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="menuToggle">
          </el-button>
        </div>
      </div>
      <div class="user-box">
        <el-color-picker v-model="theme" size="mini"
          :predefine="['#2E6677','#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d']"
          class="theme-picker" popper-class="theme-picker-dropdown" />
        <el-dropdown trigger="click" class="userCenter">
          <span class="el-dropdown-link">
            <img :src="userImg" alt="头像">
            {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-switch-button" @click.native="logOff">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
    <div class="home_btm">
      <div class="menu" :style="!isCollapse ? 'width:240px;' : 'width:64px;'">
        <el-scrollbar style="height: 100%;">
          <el-menu id="el-menu" :collapse="isCollapse" text-color="#fff" :background-color="theme"
            :default-active="defaultActive" :style="!isCollapse ? 'width:240px;' : 'width:64px;'" router>
            <template v-for="(item, i) in menuList">
              <el-menu-item v-if="item.children.length == 1 && item.path=='/'" :key="i"
                :index="'/' + item.children[0].path">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.children[0].title }}</span>
              </el-menu-item>
              <el-submenu v-else :index="`${i}`" :key="i">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span slot="title">{{ item.title }}</span>
                </template>
                <template v-for="(child, j) in item.children">
                  <el-menu-item v-if="!child.children || !child.children.length" :key="j"
                    :index="item.path + '/' + child.path">
                    {{ child.title }}</el-menu-item>
                  <el-submenu v-else :key="j" :index="child.path">
                    <template slot="title">
                      <span slot="title">{{ child.title }}</span>
                    </template>
                    <el-menu-item v-for="(child1, m) in child.children" :key="m"
                      :index="item.path + '/' + child.path + '/' + child1.path">
                      {{ child1.title }}</el-menu-item>
                  </el-submenu>
                </template>
              </el-submenu>
            </template>
          </el-menu>
        </el-scrollbar>
      </div>
      <div class="main">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import menurouter from "../../router/menurouter";
export default {
  data() {
    return {
      title: "智慧医院集成化管理系统", //系统标题
      isCollapse: false, //菜单栏收缩
      username: "admin", //用户名字
      userImg:
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3922290090,3177876335&fm=26&gp=0.jpg", //用户头像
      theme: "#2E6677", //主题色
      menuList: [], //左侧菜单栏数组
      defaultActive: null //默认选中
    };
  },
  methods: {
    //菜单栏收缩
    menuToggle() {
      this.isCollapse = !this.isCollapse;
    },
    //登出
    logOff() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    }
  },
  created() {
    this.menuList = menurouter;
    this.defaultActive = window.location.hash.split("#")[1];
    console.log(this.menuList);
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: hidden;
  header {
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    .logo-box {
      float: left;
      .logo {
        float: left;
        width: 240px;
        position: relative;
        z-index: 2;
        padding-left: 54px;
        padding-right: 10px;
        line-height: 60px;
        font-size: 18px;
        color: #fff;
        background-color: rgb(67, 117, 133);
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .icon {
          position: absolute;
          left: 0;
          width: 64px;
          height: 60px;
          background: url("../../assets/img/logo.png") no-repeat center;
          background-size: 24px auto;
          -webkit-transition: all 0.2s;
          transition: all 0.2s;
        }
        &.isHidden {
          width: 64px !important;
          padding-left: 64px;
          padding-right: 0;
          .icon {
            background-size: 32px auto;
          }
        }
      }
      .toggleBtn {
        float: left;
        position: relative;
        z-index: 1;
        left: -30px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        .el-button {
          width: 30px;
          height: 30px;
          font-size: 16px;
          line-height: 30px;
          text-align: center;
          padding: 0;
          margin-top: 15px;
        }
      }
      &:hover .toggleBtn {
        left: 0px;
      }
    }
    .user-box {
      float: right;
      .theme-picker {
        vertical-align: middle;
        margin-right: 20px;
      }
      .userCenter {
        cursor: pointer;
        line-height: 40px;
        height: 40px;
        margin-top: 10px;
        padding-right: 20px;
        .el-dropdown-link {
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .home_btm {
    display: flex;
    height: calc(100% - 60px);
    .menu {
      width: 240px;
    }
    .main {
      width: calc(100% - 240px);
    }
  }
}
</style>
<style>
.el-submenu__title i {
  color: #fff !important;
}
.el-menu-item i {
  color: #fff !important;
}
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>